<template>
  <div class="pathPlanContent">
    <div class="content">
      <div class="mapCon">
        <div id="container" class="mapWidth">
          <!-- <MapContain /> -->
        </div>
        <div class="btnBox">
          <el-button>重置</el-button>
          <el-button style="background: #30B08F;color: #fff;">保存</el-button>
        </div>
      </div>
      <div class="listCon">
        <div class="inputBox">
          <el-input v-clearEmoji
            v-model="input4"
            placeholder=""
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </div>
        <div class="list">
          1111
        </div>
        <div class="pageBox">
          <el-pagination
            layout="prev, pager, next"
            :total="100"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import MapContain from '@/components/MapContain'
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '57a18aafb55064088272e9831ab8aa35' // 安全密钥
}
export default {
  name: 'PathPlan',
  data() {
    return {
      input4: ''
    }
  },
  created() {
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '7ce880f2976149e9e8f24e51b0c34084', // key
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.DistrictSearch'] // 需要使用的的插件列表
      }).then((AMap) => {
        // level (string) 关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
        // subdistrict (number) 显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一 级，可选值：0、1、2、3，默认值：1 0：不返回下级行政区 1：返回下一级行政区 2：返回下两级行政区 3：返回下三级行政区
        // extensions (string) 是否返回行政区边界坐标点，默认值：base，不返回行政区边界坐标点，取值：all，返回完整行政区边界坐标点
        const district = new AMap.DistrictSearch({ subdistrict: 0, extensions: 'all', level: 'province' })
        district.search('郑州市', function(status, result) {
        // 查询成功时，result即为对应的行政区信息
        // console.log(result.districtList[0].boundaries,222) // 这里是整个郑州市的边界经纬度
          const bounds = result.districtList[0].boundaries
          const mask = []
          for (let i = 0; i < bounds.length; i++) {
            mask.push([bounds[i]])
          }
          const map = new AMap.Map('container', { // 设置地图容器id
            mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
            zoom: 11.5, // 设置当前显示级别
            expandZoomRange: true, // 开启显示范围设置
            zooms: [7, 20], // 最小显示级别为7，最大显示级别为20
            center: [113.658405, 34.741777], // 设置地图中心点位置
            viewMode: '3D', // 特别注意,设置为3D则其他地区不显示
            zoomEnable: true, // 是否可以缩放地图
            resizeEnable: true
            /* mapStyle(地图的显示样式) 可以不写，默认是amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86
            目前支持两种地图样式： 第一种：自定义地图样式，如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"
            可前往地图自定义平台定制自己的个性地图样式； 第二种：官方样式模版,如"amap://styles/grey"。 其他模版样式及自定义地图的使用说明见开发指南*/
            // mapStyle: "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"
            // mapStyle: "amap://styles/grey"
            // mapStyle: "amap://styles/light"
          })
          // 添加描边
          for (let i = 0; i < bounds.length; i++) {
            const polyline = new AMap.Polyline({
              path: bounds[i], // polyline 路径，支持 lineString 和 MultiLineString
              strokeColor: '#3078AC', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
              strokeWeight: 2 // 轮廓线宽度,默认为:2
              // map:map // 这种方式相当于: polyline.setMap(map);
            })
            polyline.setMap(map)
          }
        })
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.pathPlanContent{
  padding: 10px;
  // color: aliceblue;
  .content{
    display: flex;
    padding: 30px;
    min-height: 900px;
    background-color: #fff;
    .mapCon{
      width: 60%;
      height: 700px;
      border: 1px solid #ccc;
      margin-right: 50px;
      // padding: 20px;
      .mapWidth{
        width: 100%;
        height: 620px;
      }
      .btnBox{
        line-height: 80px;
        text-align: right;
        padding-right: 30px;
      }
    }
    .listCon{
      border: 1px solid #ccc;
      height: 700px;
      // width: 40%;
      flex: 1;
      padding: 10px;
      display: flex;
      // flex-wrap: wrap;
      flex-direction: column;
      .inputBox{
        width: 100%;
        height:50px;
      }
      .list{
        width: 100%;
        flex: 1;
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }
      .pageBox{
        width: 100%;
        height: 30px;
        text-align: center;
      }
    }
  }
}
// ::v-deep .number{
//   background-color: #ccc;
//   border-radius: 50%;
// }
</style>
